//权限验证包裹
import {useLocation, useNavigate} from "react-router-dom";
import {useAuth} from "@/hooks/useAuth";
import React, {Suspense, useEffect} from "react";
import {Spin} from "antd";
const WithAuthElement = (Component) => {
    return (
        <AuthElement
            element={NoAuthElement(Component)}
        />
    )
}
//权限验证组件
const AuthElement = ({element}) => {
    const location = useLocation()
    const {pathname} = location
    const auth = useAuth(pathname)
    const navigate = useNavigate()
    useEffect(() => {
        if (auth === 0) {
            navigate('/403')
        }
    }, [auth])
    return element
}
//无需权限验证组件
const NoAuthElement = (Component) => {
    return <Suspense fallback={<Spin size='large' style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
    }}/>}>{<Component/>}</Suspense>
}
export {
    WithAuthElement,
    NoAuthElement
}